<!--
 * @FileDescription 故障修复
 * @Author lz
 * @Date 20230612 15:20:39
 * @LastEditors lz
 * @LastEditTime 20230612 15:20:39
-->
<template>
    <div class="TrouBox">
        <div class="Popup">
            <div class="titBox">
                故障修复
                <close-outlined class="cancel" @click="cancel" />
            </div>
            <a-button type="primary" class="ResetButton" @click="Reset">重置</a-button>
            <div class="actionBar">
                <a-input-search v-model:value="inp_value" placeholder="搜索" @search="onSearch" class="inp_box" />
                <img src="/images/checkboxSucc.png" class="checkBox">
                <span class="txt">已修复{{ HomeContent.Default.TrobiesList.value.RepairCount }}个故障点</span>
            </div>
            <div class="popup_cont">
                <div v-for="(i, index) in HomeContent.Default.TrobiesList.value.faultRepairModels" :key="index"
                    class="checkListBox"
                    :class="i.State == true && i.Result == true ? 'success_b' : i.State == true && i.Result == false ? 'error_b' : ''">
                    <a-checkbox v-model:checked="i.types" @change="changeCheck" :disabled="i.State">{{ i.Name
                    }}</a-checkbox>
                    <img src="/images/checkboxSucc.png" class="success_ico" v-if="i.State == true && i.Result == true">
                    <span class=" SuccTxt" v-if="i.State == true && i.Result == true">修复正确</span>
                    <img src="/images/checkboxErr.png" class="success_ico" v-if="i.State == true && i.Result == false">
                    <span class="ErrTxt" v-if="i.State == true && i.Result == false">修复错误</span>
                </div>
            </div>
            <div class="footer">
                <div class="read" @click="confirm">
                    确认修复
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref } from 'vue';
import HomeContent from '../HomeContent';
import MessageCode from '../MessageCode';
const state = reactive({
    tabList: <any>[],
});
const inp_value = ref<string>('');
function cancel() {
    WebSocketComponent.Default.PostMessage(new ClientMessage.DiagnosisAdapterMessage(MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_REPAIR_CLOSE))
    HomeContent.Default.TrobiesShow.value = false
}
//模糊搜索
async function onSearch() {
    console.log(inp_value.value);

    if (inp_value.value == '') {
        let newList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR))
        HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result
    } else {
        let data = [];
        let newList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR))
        HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result
        for (let i = 0; i < HomeContent.Default.TrobiesList.value.faultRepairModels.length; i++) {
            if (HomeContent.Default.TrobiesList.value.faultRepairModels[i].Name.indexOf(inp_value.value) != -1) {
                data.push(HomeContent.Default.TrobiesList.value.faultRepairModels[i]);
            }
        }
        HomeContent.Default.TrobiesList.value.faultRepairModels = data
    }
}
//确认修复
async function confirm() {
    let newArr: any[] = []
    HomeContent.Default.TrobiesList.value.faultRepairModels.forEach((item: any) => {
        if (item.types) {
            newArr.push(item.Id)
        }
    });
    if (newArr.length == 0) {
        return
    }
    let newList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_REPAIR, newArr.toString()))
    console.log(JSON.parse(newList.Content));
    JSON.parse(newList.Content).Result.faultRepairModels.forEach((item: any) => {
        item.types = false
        if (item.State) {
            item.types = true
        }
    });
    console.log(JSON.parse(newList.Content).Result);
    HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result
}
function changeCheck() {

}
async function Reset() {
    inp_value.value = ''
    let newList: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET_REPAIR))
    HomeContent.Default.TrobiesList.value = JSON.parse(newList.Content).Result
}
</script>

<style scoped>
.TrouBox {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.3);
    position: relative;
}

.Popup {
    width: 1440px;
    height: 940px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.titBox {
    height: 54px;
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    line-height: 42px;
    margin-top: 30px;
    margin-left: 40px;
}

.cancel {
    font-size: 28px;
    font-weight: 600;
    float: right;
    margin-top: 4px;
    margin-right: 30px;
}

.inp_box {
    width: 500px;
    height: 50px;
    margin-left: 70px;
    margin-top: 24px;
}

.actionBar {
    width: 100%;
    height: 50px;
    position: relative;
}

.checkBox {
    width: 24px;
    position: absolute;
    top: 36px;
    right: 171px;
}

.txt {
    font-size: 16px;
    font-weight: 500;
    color: #202020;
    position: absolute;
    right: 36px;
    top: 34px;
}

.footer {
    height: 78px;
    width: 100%;
    border-top: 1px solid #EDE8F4;
    position: absolute;
    bottom: 0;
}

.read {
    width: 156px;
    height: 48px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 500;
    color: #202020;
    background: #9BFB4E;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    position: absolute;
    right: 24px;
    bottom: 14px;
    text-align: center;
}

.popup_cont {
    width: 1300px;
    height: 685px;
    margin: 0 auto;
    margin-top: 34px;
    overflow-y: auto;

}

::-webkit-scrollbar {
    width: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #F8F8F8;

}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #DFE1E8;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #DFE1E8;
}

.checkListBox {
    width: 610px;
    height: 72px;
    float: left;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #F0F0F0;
    padding-left: 20px;
    margin-right: 30px;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.ErrTxt {
    font-size: 16px;
    font-weight: 400;
    color: #FB4E4E;
    position: absolute;
    right: 10px;
}

.SuccTxt {
    font-size: 16px;
    font-weight: 400;
    color: #42CB6E;
    position: absolute;
    right: 10px;
}

.success_ico {
    width: 24px;
    position: absolute;
    right: 84px;
    top: 24px;
}

.l2 {
    margin-right: 0;
}

:deep().ant-checkbox-wrapper {
    width: 470px;
    font-size: 16px;
    font-weight: 400;
    align-items: center;
    color: #202020;
}

:deep().ant-checkbox {
    top: 0 !important;
}

.success_b {
    background: linear-gradient(90deg, rgba(155, 251, 78, 0.1) 0%, rgba(155, 251, 78, 0.07) 58%, rgba(155, 251, 78, 0) 100%);
    border: none;
}

.error_b {
    background: linear-gradient(90deg, rgba(251, 78, 78, 0.1) 0%, rgba(251, 78, 78, 0.07) 58%, rgba(251, 78, 78, 0) 100%);
    border: none;
}

:deep().ant-checkbox-disabled+span {
    color: #202020;
}

:deep().ant-checkbox-disabled {
    display: none;
}

:deep().ant-btn {
    height: 46px;
    width: 46px;
}

:deep().ant-input {
    height: 46px;
}
.ResetButton{
    position: absolute;
    left: 600px;
    top: 111px;
    width: 80px;
    height: 40px;
    z-index: 999;
}
</style>